<template>
  <div class="w-full h-full flex items-center justify-center">
    <canvas ref="qrcodeCanvas"> </canvas>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from "vue";
import QRcode from "qrcode";
import { url } from "inspector";
export default defineComponent({
  props: {
    url: {
      type: String,
      default: "https://gitee.com/liao-yanglin/qr-code",
    },
    dark: {
      type: String,
      default: "red",
    },
    light: {
      type: String,
      default: "#fbb",
    },
  },
  setup(props, { emit }) {
    const qrcodeCanvas = ref();
    const state = reactive({});
    onMounted(() => {
      QRcode.toCanvas(qrcodeCanvas.value, props.url, {
        width: 400, //自定义宽度
        color: {
          dark: props.dark, //自定义码的颜色
          light: props.light, //自定义背景颜色
        },
      });
    });
    return {
      ...toRefs(state),
      qrcodeCanvas,
    };
  },
});
</script>

<style scoped></style>
